<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="WEB-INF/jsps/common.jsp"%>
<title>EasyUi 实例</title>
<style type="text/css">
.layout-panel-west {
	border-right: 1px solid #c5c5c5;
}
</style>
<script>
	$(function() {
		/*布局部分*/
		$('#master-layout').layout({
			fit : true
		/*布局框架全屏*/
		});
		
		 //监听右键事件，创建右键菜单
        $('#tabs').tabs({
            onContextMenu:function(e, title,index){
                e.preventDefault();
                if(index>0){
                    $('#mm4').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    }).data("tabTitle", title);
                }
            }
        });
		 
	    $('#mm4').menu({
	        onClick: function (item) {
	            closeTab(item.id);
	        }
	    });

	    $('.easyui-datalist').datagrid({
	    	 onClickRow: function (rowIndex, rowData) {
	    		/*  alert(JSON.stringify(rowData.value)); */
	    		 openTab(rowData.text,(rowData.value));
	    	 }
	    });
	});	
	
	function closeTab(action){
	    var alltabs = $('#tabs').tabs('tabs');
	    var onlyOpenTitle = '主页';
	    var currentTab =$('#tabs').tabs('getSelected');
	    var allTabtitle = [];
	    $.each(alltabs,function(i,n){
	        allTabtitle.push($(n).panel('options').title);
	    })
	    switch (action) {
	        case "refresh":
	            var iframe = $(currentTab.panel('options').content);
	            var src = iframe.attr('src');
	            $('#tabs').tabs('update', {
	                tab: currentTab,
	                options: {
	                    content: createFrame(src)
	                }
	            })
	            break;
	        case "close":
	            var currtab_title = currentTab.panel('options').title;
	            $('#tabs').tabs('close', currtab_title);
	            break;
	        case "closeall":
	            $.each(allTabtitle, function (i, n) {
	                if (n != onlyOpenTitle){
	                    $('#tabs').tabs('close', n);
	                }
	            });
	            break;
	        case "closeother":
	            var currtab_title = currentTab.panel('options').title;
	            $.each(allTabtitle, function (i, n) {
	                if (n != currtab_title && n != onlyOpenTitle)
	                {
	                    $('#tabs').tabs('close', n);
	                }
	            });
	            break;
	        case "closeright":
	            var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);

	            if (tabIndex == alltabs.length - 1){
	                alert('亲，后边没有啦 ^@^!!');
	                return false;
	            }
	            $.each(allTabtitle, function (i, n) {
	                if (i > tabIndex) {
	                    if (n != onlyOpenTitle){
	                        $('#tabs').tabs('close', n);
	                    }
	                }
	            });
	            break;
	        case "closeleft":
	            var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
	            if (tabIndex == 1) {
	                alert('亲，前边那个上头有人，咱惹不起哦。 ^@^!!');
	                return false;
	            }
	            $.each(allTabtitle, function (i, n) {
	                if (i < tabIndex) {
	                    if (n != onlyOpenTitle){
	                        $('#tabs').tabs('close', n);
	                    }
	                }
	            });
	            break;
	        case "exit":
	            $('#closeMenu').menu('hide');
	            break;
	    }
	}
	
	function doSearch(value,name){
		alert('You input: ' + value+'('+name+')');
	}
	
	function openTab(title,href){
		var e = $('#tabs').tabs('exists',title);
	    if(e){
	        $("#tabs").tabs('select',title);

	        var tab = $("#tabs").tabs('getSelected');
	        $('#tabs').tabs('update',{
	            tab:tab,
	            options:{
	                title:title,
	                content:'<iframe name="indextab" scrolling="auto" src="'+href+'" frameborder="0" style="width:100%;height:100%;"></iframe>',
	                closable:true,
	                selected:true
	            }
	        });
	    }else{
	        $('#tabs').tabs('add',{
	            title:title,
	            content:'<iframe name="indextab" scrolling="auto" src="'+href+'" frameborder="0" style="width:100%;height:100%;"></iframe>',
	            iconCls:'',
	            closable:true
	        });
	    }
	}
</script>
</head>
<body>
	<div id="master-layout">
		<div data-options="region:'north',border:false,bodyCls:'theme-header-layout'">
			<div class="theme-navigate">
				<div class="left">
					<a href="#" class="easyui-linkbutton left-control-switch"><i class="fa fa-bars fa-lg"></i></a>                    
					<a href="#" class="easyui-menubutton theme-navigate-user-button" data-options="menu:'.theme-navigate-user-panel'">匿名</a>
					<a href="#" class="easyui-linkbutton">新建</a>
					<a href="#" class="easyui-menubutton" data-options="menu:'#mm3',hasDownArrow:false">消息<span class="badge color-default">15</span></a>
					
					<div id="mm3" class="theme-navigate-menu-panel" style="width:180px;">
                        <div>产品消息<span class="badge color-success">5</span></div>
                        <div>安全消息<span class="badge color-important">10</span></div>
                        <div>服务消息</div>
                        <div class="menu-sep"></div>
                        <div>查看历史消息</div>
                        <div class="menu-sep"></div>
                        <div>清除消息提示</div>
                    </div>
                    
					<div class="theme-navigate-user-panel">
                       <dl>
                       		<dd>
                            	<img src="resources/js/jquery-easyui-1.5.1/themes/insdep/images/portrait86x86.png" width="86" height="86">
                                <b class="badge-prompt">匿名<i class="badge color-important">10</i></b>
                                <span>examples@insdep.com</span>
                                <p>安全等级：<i class="text-success">高</i></p>
                            </dd>
                            <dt>
                            	<a class="theme-navigate-user-modify">修改资料</a>
                                <a class="theme-navigate-user-logout">注销</a>
                            </dt>
                       </dl>
                    </div>
				</div>
				<div class="right">
					<select id="cc1" class="easyui-combobox theme-navigate-combobox" name="dept" style="width:120px;">   
                        <option>选择样式</option>   
                        <option>Insdep</option>   
                        <option>Bootstrap</option> 
                        <option>Gray</option> 
                        <option>Metro</option> 
                        <option>Material</option> 
                    </select>
 					<input class="easyui-searchbox theme-navigate-search" data-options="prompt:'输入搜索的关键词..',menu:'#mm',searcher:doSearch" style="width:300px"></input>						<a href="#" class="easyui-menubutton theme-navigate-more-button" data-options="menu:'#more',hasDownArrow:false"></a>
					<div id="more" class="theme-navigate-more-panel">
						<div>联系我们</div>
						<div>参与改进计划</div>
						<div>关于</div>
					</div>
					<div id="mm" class="theme-navigate-menu-panel">
                        <div data-options="name:'all'">全部内容</div>
                        <div data-options="name:'sports'">标题</div>
                        <div data-options="name:'sports'">作者</div>
                        <div data-options="name:'sports'">内容</div>
                    </div>
				</div>
			</div>
		</div>
		<!-- <div data-options="region:'west',split:true,border:false" title="菜单"
			style="width: 300px; padding: 10px 20px;"> -->
			<div data-options="region:'west',border:false,split:true,bodyCls:'theme-left-layout'" title="菜单" style="width:200px;">
			 <div class="theme-left-normal">
			 	<div class="easyui-layout" data-options="border:false,fit:true">
			 		<!--start region:'center'-->
                    <div data-options="region:'center',border:false">
                        <!--start easyui-accordion--> 
                        <div class="easyui-accordion" data-options="border:false,fit:true">
                           <div title="系统管理">
                           	 <ul class="easyui-datalist" data-options="border:false,fit:true">
                                   <li value="user/forward.do">用户管理</li>
                                   <li value="role/forward.do">角色管理</li>
                                   <li>菜单管理</li>
                                   <li value="emp/forward.do">员工管理</li>
                               </ul>
                           </div>
                            <div title="公共信息">   
                                <ul class="easyui-datalist" data-options="border:false,fit:true">
                                    <li>企业文化</li>
                                    <li>公文</li>
                                    <li>新闻公告</li>
                                    <li>重大信息</li>
                                </ul>  
                            </div>   
                            <div title="个人事务">   
                                <ul class="easyui-datalist" data-options="border:false,fit:true">
                                    <li>内部邮件</li>
                                    <li>我的日志</li>
                                    <li>我的提醒</li>
                                </ul>      
                            </div>   
                            <div title="通讯录"></div>
                            <div title="流程中心">   
                                <ul class="easyui-datalist" data-options="border:false,fit:true">
                                    <li>启动流程</li>
                                    <li>待办流程</li>
                                    <li>我发起的流程</li>
                                </ul>      
                            </div>
                            <div title="文档中心"></div>
                            <div title="个人设置">   
                                <ul class="easyui-datalist" data-options="border:false,fit:true">
                                    <li value="http://www.sina.com.cn">修改密码</li>
                                </ul>      
                            </div>
                        </div>
                        <!--end easyui-accordion--> 
                    </div>
                    <!--end region:'center'-->
			 	</div>
			 </div>
		</div>
		<div data-options="region:'south'" style="height: 30px; line-height: 30px">
			<div style="text-align: center; font-weight: bold">EntWebSite ver 1.0</div>
		</div>
		<div data-options="region:'center',border:false">
			<div id="tabs"  class="easyui-tabs" data-options="tools:'#tab-tools',fit:true" >
				<div title="主页" style="padding:10px;">
					
				</div>
				<!-- <div title="百度" data-options="closable:true" style="overflow:hidden">
					<iframe scrolling="yes" frameborder="0"  src="https://www.baidu.com" style="width:100%;height:100%;"></iframe>
				</div> -->
			</div>
		</div>
		<div id="mm4" class="easyui-menu" style="width: 150px;">
	        <div id="refresh">刷新</div>
	        <div class="menu-sep"></div>
	        <div id="close">关闭</div>
	        <div id="closeall">全部关闭</div>
	        <div id="closeother">除此之外全部关闭</div>
	        <div class="menu-sep"></div>
	        <div id="closeright">当前页右侧全部关闭</div>
	        <div id="closeleft">当前页左侧全部关闭</div>
    	</div>
	</div>
</body>
</html>